<template>
	<view>
		<view class="cu-custom" :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
				<view class="left" v-if="left">
					<slot name="leftText"></slot>
				</view>
				<view class="action" v-if="isBack">
					<text class="cuIcon-back cu-back" @tap="BackPage" v-if="showBackIcon"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{ top: StatusBar + 'px' }]"><slot name="content"></slot></view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			StatusBar: this.StatusBar,
			CustomBar: this.CustomBar
		};
	},
	name: 'cu-custom',
	computed: {
		style() {
			var StatusBar = this.StatusBar;
			var CustomBar = this.CustomBar;
			// uni.getStorage({
			// 	key: 'StatusBar',
			// 	success(d) {
			// 		if(!StatusBar) {
			// 			StatusBar = d.data
			// 		}
			// 	}
			// })
			// uni.getStorage({
			// 	key: 'CustomBar',
			// 	success(d) {
			// 		if(!CustomBar) {
			// 			CustomBar = d.data
			// 		}
			// 	}
			// })
			try {
				StatusBar = uni.getStorageSync('StatusBar');
				CustomBar = uni.getStorageSync('CustomBar');
			} catch (e) {
				
			}
			
			var bgImage = this.bgImage;
			var backColor = this.backColor;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;background: ${backColor};`;
			if (this.bgImage) {
				style = `${style}background-image:url(${bgImage});`;
			}
			return style;
		}
	},
	props: {
		bgColor: {
			type: String,
			default: ''
		},
		backColor: {
			type: String,
			default: ''
		},
		left: {
			type: Boolean,
			default: false
		},
		leftText: {
			type: String,
			default: ''
		},
		
		isBack: {
			type: [Boolean, String],
			default: false
		},
		showBackIcon: {
			type: Boolean,
			default: true
		},
		bgImage: {
			type: String,
			default: ''
		}
	},
	methods: {
		BackPage() {
			this.$emit("navigateBack")
		}
	}
};
</script>

<style lang="scss">
.cu-bar{
	.fixed{
		position: fixed;
		left: 0;
		right: 0;
	}
	.left{
		color: #fff;
		margin-left: 20rpx;
	}
}
</style>
